/**
 * 润色选项栏组件
 * 提供文本润色的各种选项按钮
 */
import React from 'react';
import {
    Box, Button, useTheme, alpha
} from '@mui/material';
import {
    AutoAwesome,
    Autorenew,
    FormatClear,
    Assignment,
    Description
} from '@mui/icons-material';
import { PolishType } from '../../../types/text';
import { SelectedTextInfo } from '../../../types/text';

interface PolishOptionsBarProps {
    selectedText: string;
    selectionInfo?: SelectedTextInfo | null;
    onProcessRequest: (type: PolishType) => void;
    disabled: boolean;
}

/**
 * 润色选项按钮栏：提供一系列文本润色选项
 */
const PolishOptionsBar: React.FC<PolishOptionsBarProps> = ({
    selectedText,
    selectionInfo,
    onProcessRequest,
    disabled
}) => {
    const theme = useTheme();

    // 润色选项配置
    const polishOptions = [
        { type: 'enhance' as PolishType, label: '提升', icon: <AutoAwesome fontSize="small" /> },
        { type: 'rewrite' as PolishType, label: '重写', icon: <Autorenew fontSize="small" /> },
        { type: 'simplify' as PolishType, label: '简洁', icon: <FormatClear fontSize="small" /> },
        { type: 'expand' as PolishType, label: '扩展', icon: <Assignment fontSize="small" /> },
        { type: 'summarize' as PolishType, label: '总结', icon: <Description fontSize="small" /> }
    ];

    return (
        <Box
            sx={{
                display: 'flex',
                flexWrap: 'wrap',
                gap: 0.75,
                py: 0.5, // 减少上下内边距
                px: 1.5,
                backgroundColor: alpha(theme.palette.background.paper, 0.7),
                backdropFilter: 'blur(8px)',
                overflowX: 'auto',
                justifyContent: 'flex-start', // 按钮左对齐
                borderBottom: 'none', // 确保底部没有边框
                marginBottom: 0, // 移除底部间距
                paddingBottom: 0.25 // 减少底部内边距
            }}
        >
            {polishOptions.map((option) => (
                <Button
                    key={option.type}
                    variant="outlined"
                    size="small"
                    startIcon={option.icon}
                    onClick={() => onProcessRequest(option.type)}
                    disabled={disabled || !selectedText || selectedText.trim().length === 0}
                    sx={{
                        borderRadius: 1.5,
                        textTransform: 'none',
                        px: 1.25,
                        py: 0.5,
                        minWidth: 0,
                        fontSize: '0.75rem',
                        fontWeight: 500,
                        borderColor: alpha(theme.palette.primary.main, 0.3),
                        color: 'primary.main',
                        backgroundColor: alpha(theme.palette.primary.main, 0.02),
                        '&:hover': {
                            backgroundColor: alpha(theme.palette.primary.main, 0.08),
                            borderColor: alpha(theme.palette.primary.main, 0.5),
                        },
                        '& .MuiButton-startIcon': {
                            marginRight: '4px', // 减少图标和文字的间距
                            marginLeft: '-2px',  // 调整图标左侧边距
                            '& .MuiSvgIcon-root': {
                                fontSize: '0.9rem', // 统一图标大小
                                verticalAlign: 'middle' // 垂直居中对齐
                            }
                        },
                        '& .MuiButton-label': {
                            display: 'flex',
                            alignItems: 'center', // 垂直居中对齐
                        },
                        height: '28px', // 固定高度确保一致性
                        minHeight: '28px',
                        lineHeight: 1 // 调整行高以改善对齐
                    }}
                >
                    {option.label}
                </Button>
            ))}
        </Box>
    );
};

export default React.memo(PolishOptionsBar); 